<template>
  <div class="question-displayer">

    <mu-container>
      <mu-row gutter>
        <mu-col span="2" class="question-displayer__field-name">题目形式</mu-col>
        <mu-col span="10">
          <mu-radio v-model="editForm.question_form" :value="1" label="选择"></mu-radio>
          <mu-radio v-model="editForm.question_form" :value="2" label="填空"></mu-radio>
        </mu-col>
      </mu-row>
      <mu-row>
        <mu-col span="2" class="question-displayer__field-name">题目类别</mu-col>
        <mu-col span="10">
          <mu-select v-model="editForm.question_type">
            <mu-option
              v-for="(item,i) in types"
              :key="i"
              :label="item.name"
              :value="item.id"></mu-option>
          </mu-select>
        </mu-col>
      </mu-row>
      <mu-row>
        <mu-col span="2" class="question-displayer__field-name">题面</mu-col>
        <mu-col span="10">
          <mu-text-field v-model="editForm.ask" style="width:100%"></mu-text-field>
        </mu-col>
      </mu-row>
      <mu-row>
        <mu-col span="2" class="question-displayer__field-name">图片</mu-col>
        <mu-col span="10">
          <p v-if="!editForm.graph">（无图片）</p>
          <img v-else :src="src" :alt="editForm.graph">
        </mu-col>
      </mu-row>
      <mu-row v-if="isChoise">
        <mu-col span="2" class="question-displayer__field-name">选项</mu-col>
        <mu-col span="10">
          <options-manager v-model="editForm.options" :answer.sync="editForm.answer"></options-manager>
        </mu-col>
      </mu-row>
      <mu-row>
        <mu-col span="2" class="question-displayer__field-name">答案</mu-col>
        <mu-col span="10">
          <mu-text-field :disabled="isChoise" v-model="editForm.answer" style="width:100%"></mu-text-field>
        </mu-col>
      </mu-row>
      <mu-row>
        <mu-col span="2" class="question-displayer__field-name">出题人</mu-col>
        <mu-col span="10">{{ editForm.fullname }}</mu-col>
      </mu-row>
      <mu-row>
        <mu-col span="2" class="question-displayer__field-name">出题时间</mu-col>
        <mu-col span="10">{{ editForm.created_at }}</mu-col>
      </mu-row>
      <mu-row>
        <mu-col span="2" class="question-displayer__field-name">题目状态</mu-col>
        <mu-col span="10">
          <p>通过数：{{ editForm.check_status.pass_num || 0 }}</p>
          <p>拒绝数：{{ editForm.check_status.fail_num || 0 }}</p>
        </mu-col>
      </mu-row>
    </mu-container>
    <!-- <mu-form :model="q" label-position="top" label-width="100">
      <mu-form-item prop="graph" label="图片">
        <mu-radio v-model="formOptions.useGraph" :value="true" label="有图片"></mu-radio>
        <mu-radio v-model="formOptions.useGraph" :value="false" label="无图片"></mu-radio>
      </mu-form-item>
      <image-uploader v-show="formOptions.useGraph" ref="graph"></image-uploader>
    </mu-form> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { process } from '@/util/questions'
import OptionsManager from '../Questions/OptionsManager'

export default {
  name: 'QuestionDisplayer',
  components: {
    OptionsManager
  },
  props: {
    question: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      editForm: null
    }
  },
  computed: {
    ...mapGetters({
      types: 'types/options'
    }),
    isChoise() {
      return this.editForm.question_form === 1
    },
    processedQuestion() {
      return process(this.question, this.types)
    },
    src() {
      return `/api/questions/${this.processedQuestion.id}/graph`
    },
    isChanged() {
      const keys = ['id', 'question_form', 'question_type', 'ask', 'options', 'answer']
      if ((!this.processedQuestion) || (!this.editForm)) {
        return false
      }
      for (const key of keys) {
        const left = this.processedQuestion[key]
        const right = this.editForm[key]
        if (left instanceof Array && right instanceof Array) {
          if (left.length !== right.length) {
            return true
          }
          for (let i = 0; i < left.length; i++) {
            if (left[i] !== right[i]) {
              return true
            }
          }
        } else if (left !== right) {
          return true
        }
      }
      return false
    }
  },
  watch: {
    processedQuestion() {
      this.refreshEditForm()
    },
    isChanged() {
      this.$emit('update:isChanged', this.isChanged)
    }
  },
  created() {
    this.refreshEditForm()
  },
  methods: {
    refreshEditForm() {
      const options = this.processedQuestion.options ? [...this.processedQuestion.options] : []
      this.editForm = {
        ...this.processedQuestion,
        options
      }
    },
    setAnswer(i) {
      this.editForm.answer = String.fromCharCode(65 + i)
    }
  }
}
</script>

<style lang="scss">
.question-displayer-options {
  margin-left: 20px;
  list-style-type: upper-alpha;
}
.question-displayer {
  .question-displayer__field-name {
    font-weight: bold;
  }
  .question-displayer-answer,
  .question-displayer-ask {
    font-size: 20px;
    font-weight: bold;
  }
}
</style>
